<head>
    <style>
        body{
            height: 100vh;
        }
        .father{
            width: 900px;
            border: 1px sandybrown solid;
            height: 600px;
            display: grid;
            place-content: center;
        }
        .cover{
            padding-top: 30px;
            padding-bottom: 30px;
            place-content: center;
            width: 800px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            /*justify-items: center;*/
            border: 1px solid salmon;
            grid-gap: 20px;
        }
        .item{
            display: grid;
            place-items: center center;
        }
        .item div{
            background: #0c5460;
            width: 100%;
        }
    </style>
</head>
<div class="father">
<div class="cover">
    <div class="item"><div>1</div></div>
    <div class="item"><div>2</div></div>
    <div class="item"><div>3</div></div>
    <div class="item"><div>4</div></div>
    <div class="item"><div>1</div></div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
    <script>
         var arr=[
              [1,2,3]
         ]
        var arr1=arr[0];
        arr1.push(4);
         console.log(arr[0][3]);
    </script>
</div>
